<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <!-- <script src="../../../react.js"></script>
    <script src="../../../JSXTransformer.js"></script> -->
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>  
    <script src="./react-demo2.js" type="text/babel"></script>
    <link href="./react-demo2.css" type="text/css"/>
</head>
<style>
    body{
        font-size: 2rem;
    }
    p{
        font: 2.5rem;
        font-weight: bold;
    }
    select{
        font-size: 2rem;
    }
    input{
        font-size: 2rem;
    }
    label {font-size:2rem;cursor:pointer;}
    label i {
        font-size:2rem;
        font-style:normal;
        display:inline-block;
        width:2rem;
        height:2rem;
        text-align:center;
        line-height:2rem;
        color:#fff;
        vertical-align:middle;
        margin:-2px 2px 1px 0px;
        border:#2489c5 1px solid;
    }
    input[type="checkbox"],input[type="radio"] {display:none;}
    input[type="radio"] + i {border-radius:7px;}
    input[type="checkbox"]:checked + i,input[type="radio"]:checked + i {background:#2489c5;}
    input[type="checkbox"]:disabled + i,input[type="radio"]:disabled + i {border-color:#ccc;}
    input[type="checkbox"]:checked:disabled + i,input[type="radio"]:checked:disabled + i {background:#ccc;}
</style>
<body>
    <p>请录入更新后的身份信息</p>
    <!-- <div id="top">客户姓名: <b>卓敏欣</b>&nbsp;&nbsp;性别: <b>女</b>&nbsp;&nbsp;出生日期: <b>1997-09-03</b></div> -->
    <div id="topCompent"></div>
    <div id="secondCompent" style="margin-top:2rem;">
        <!-- <select>
            <option value="15">居民身份证</option>
            <option value="20">中国护照</option>
            <option value="32">港澳台通行证</option>
            <option value="48">外国护照</option>
            <option value="21">其他</option>
        </select> -->
    </div>
    <div id="thirdCompent" style="margin-top:2rem;">
        <!-- 证件号码: 
        <input type="text" style="width:40%;margin-left:2rem;" value="234002305534" /> -->
    </div>
    <div id="fourthCompent" style="margin-top:2rem;">
        <!-- 证件有效期: 
        <input type="text" style="width:40%;" value="2017-05-12" />
        <label><input type="checkbox" /><i>✓</i>长期</label> -->
    </div>
    <div style="margin-top:2rem;">批单选择方式: 
        <label><input type="radio" name="batchSelection" /><i>✓</i>电子批单</label><br/>
        <div style="margin-top:2rem;margin-bottom:2rem;">电子邮箱: <input type="text" style="width:40%;margin-left:2rem;" value="2340023@qq4.com" /></div>
        <label style="margin-left:14rem;margin-top:2rem;"><input type="radio" name="batchSelection" /><i>✓</i>纸质批单</label>
    </div> 

</body>
<!-- <script type="text/babel">
    var TopCompent = React.createClass({ 
        getInitialState : function(){ 
            return {
                name : '张三',
                sex : '男',
                birthday : '2017-02-01'
            }; 
        }, 
        render : function(){ 
            var name = this.state.name;
            var sex = this.state.sex;
            var birthday = this.state.birthday;
            return(
                <span>
                    客户姓名: <b>{name}</b>&nbsp;&nbsp;性别: <b>{sex}</b>&nbsp;&nbsp;出生日期: <b>{birthday}</b>
                </span>
            ); 
        } 
    }); 
    ReactDOM.render(<TopCompent/>,document.getElementById('topCompent'));
</script> -->
</html>